<template>
	<div class="mask">
		<video id="video" :src="url" style="width: 100%;height: 92vh;margin-top: 8vh;"
		:autoplay="true"
		:poster="(site=='新浪微博视频'?'https://image.baidu.com/search/down?url=':'') + poster"></video>
		<u-icon class="back" name="arrow-left" color="#ffffff" size="40" @click="back"></u-icon>
		<div v-if="!url" class="source" @click="toSource">看原文</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				url: "",
				site: "",
				poster: "",
				source: "",
				video: null
			};
		},
		onLoad: function(option) {
			this.url = option.url;
			this.site = option.site;
			this.poster = option.poster;
			this.source = option.source;
			this.video = uni.createVideoContext("video");
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			toSource() {
				// #ifdef APP-PLUS
				this.$u.route("/pages/webview/webview",{
					url: encodeURIComponent(this.source),
				});
				// #endif
				
				// #ifdef H5
				window.open(this.source);
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 1 );
}
.mask{
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 1 );
	
	.back{
		position: absolute;
		z-index: 999;
		left: 40rpx;
		top: var(--status-bar-height);
		/*#ifdef H5*/
		top:40rpx;
		/*#endif*/
	}
	
	.source{
		color: #fff;
		position: absolute;
		z-index: 999;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 48rpx;
	}
}
</style>
